<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader" background="#111111">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.my.detail") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
    <view class="container" v-if="!isLoading">
      <image :src="detail.image" class="top_image" mode="aspectFill" />
      <view class="title">{{ detail.title }}</view>
      <view class="date"
        >{{ detail.author }}：{{
          detail.created_at | moment("YYYY.MM.DD HH:mm")
        }}</view
      >
      <view class="content" v-html="detail.content"></view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      isLoading: false,
      detail: null,
    };
  },
  methods: {
    ...mapActions("mf/home", ["articleDetail"]),
  },
  async onLoad(option) {
    this.isLoading = true;
    this.detail = await this.articleDetail({ id: option.id });
    this.isLoading = false;
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding: 40rpx 20rpx 0;
  box-sizing: border-box;
}
.top_image {
  width: 100%;
  height: 400rpx;
  border-radius: 20rpx;
  margin-bottom: 26rpx;
}
.title {
  width: 100%;
  font-size: 44rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 71rpx;
  margin-bottom: 30rpx;
}
.date {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 33rpx;
  margin-bottom: 30rpx;
}
.content {
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 58rpx;
}
</style>